<template>
  <div class="app-container">
    <div class="main">
      <!-- 拿到小票数据编辑列表 -->
      <div class="content">
        <div
          v-for="(ele, index) in dataList"
          :key="index"
          style="margin-bottom: 25px"
        >
          <!-- 每项数据标题 -->
          <span style="margin-right: 10px">{{ ele.sectionTitle }}</span>
          <!-- 开关 -->
          <el-switch
            v-model="ele.printEnabled"
            :active-value="1"
            :inactive-value="0"
            @change="changeSwitch($event, ele.printEnabled)"
          />
          <!-- 每项数据内容 -->
          <div v-show="ele.printEnabled" class="act_style">
            <div
              v-for="(e, index2) in ele.fieldList"
              :key="index2"
              class="flex"
            >
              <el-checkbox
                v-model="e.printEnabled"
                :true-label="1"
                :false-label="0"
                :label="e"
                @change="handleCheck($event, e.printEnabled)"
                >{{ e.fieldTitle }}</el-checkbox
              >
              <!-- 特例 含有输入框 -->
              <el-input
                style="margin-right: 4px"
                size="mini"
                v-show="e.customFlag == 1"
                v-model="e.fieldCustomContent"
                maxlength="30"
                placeholder="请输入欢迎语"
              ></el-input>
            </div>
            <!-- 索引上下键 -->
            <div class="move_btn">
              <i
                class="arrow_sty iconfont icon-jiantoushangyuan"
                @click="moveUp(index)"
                v-show="index > 0"
              ></i>
              <i
                class="arrow_sty iconfont icon-jiantouxiayuan"
                @click="moveDown(index)"
                v-show="index < dataList.length - 1"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button style="width: 100px" @click="handleDefault"
          >恢复默认</el-button
        >
        <el-button style="width: 100px" type="primary" @click="handleApply"
          >应用</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TabContent",
  props: {
    linkName: String,
    activeName: String,
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      dataList: this.list,
    };
  },
  watch: {
    list: {
      handler(val) {
        this.dataList = val;
        // 更新父组件数据
        this.$emit(
          "handle_change",
          this.dataList,
          this.activeName,
          this.linkName
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 恢复默认
    handleDefault() {
      this.$emit("handle_default");
    },
    // 点击应用
    handleApply() {
      this.$emit("handle_apply", this.dataList);
    },
    // 上移键
    moveUp(index) {
      const box = this.dataList.splice(index, 1)[0];
      this.dataList.splice(index - 1, 0, box);
    },
    // 下移键
    moveDown(index) {
      const box = this.dataList.splice(index, 1)[0];
      this.dataList.splice(index + 1, 0, box);
    },
    // 选中 选项
    handleCheck(e, val) {
      val = val == "0" ? "1" : "0";
    },
    // 开关 是否全选
    changeSwitch(e, val) {
      val = val ? 0 : 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0;
}
.content {
  height: 60vh;
  overflow: auto;
  padding-bottom: 2rem ;
  box-sizing: border-box;
}
.main {
  position: relative;
  height: 72vh;
}
.footer {
  width: 100%;
  height: 10vh;
  position: absolute;
  bottom: 0;
  text-align: center;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: #fff;
  // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.move_btn {
  margin-left: auto;
}
.arrow_sty {
  font-size: 1.2rem;
  margin-right: 10px;
}
.act_style {
  flex: 1;
  background-color: #f6f4f4;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  white-space: normal;
  flex-wrap: wrap;
  .el-checkbox {
    margin: 4px 30px 4px 0;
  }
  margin: 8px 0;
}
.flex {
  display: flex;
}
// icon图标
@font-face {
  font-family: "iconfont"; /* Project id 4438690 */
  src: url("//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.woff2?t=1708401857232")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.woff?t=1708401857232")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.ttf?t=1708401857232")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 22px;
  font-style: normal;
  color: #409eff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiantouxiayuan:before {
  content: "\e857";
  color: #409eff;
}

.icon-jiantoushangyuan:before {
  content: "\e856";
  color: #409eff;
}
</style>
